<template>
    <div class="agent-sum-wrap" v-loading="loading">
        <div class="tabs-wrap clearfloat">
            <el-tabs v-model="activeTabs" @tab-click="tabChange" class="tabs fl">
                <el-tab-pane label="工作量" name="case_statistics"></el-tab-pane>
                <el-tab-pane label="案件内审" name="case_analysis"></el-tab-pane>
                <el-tab-pane label="平均耗时" name="case_time_consuming"></el-tab-pane>
                <el-tab-pane label="通过率" name="gzj_after"></el-tab-pane>
                <el-tab-pane label="代理人评分" name="agent-rate"></el-tab-pane>
            </el-tabs>
            <div class="search-wrap fr">
                <table-search
                    v-if="search_show"
                    ref="table-search"
                    :selectHead="selectHead"
                    @searchMethods="searchMethods"></table-search>
            </div>
        </div>
        <order-sum
            ref="order-sum"
            :tableHeader="tableHeader"
            :tableData="tableData"
            :current_page="current_page"
            :per_page="per_page"
            :activeTabs="activeTabs"
            @sortMethods="sortMethods">
        </order-sum>
        <pagination
            v-if="is_show"
            @paginationChange="paginateChange"
            :total="total">
        </pagination>
    </div>
</template>

<script>
import pagination from '~/components/pagination'
import orderSum from './components/order-sum'
import tableSearch from '~/components/tableSearch'
export default {
    components: {
        pagination,
        orderSum,
        tableSearch
    },
    data() {
        return {
            is_show: true,
            search_show: true,
            loading: false,
            activeTabs: 'case_statistics',
            per_page: 25,
            current_page: 1,
            total: 0,
            tableData: [],
            sort_params: {},
            search_params: {},
            selectHead: [
                {
                    label: '代理人',
                    props: 'agent_id'
                },
                {
                    label: '状态',
                    props: 'type'
                }
            ],
            tableHeader: [
                    {
                        id: 1,
                        label: '2020-01',
                        align: 'left',
                        prop: 'one',
                        minWidth: '120'
                    },
                    {
                        id: 2,
                        label: '2020-02',
                        align: 'left',
                        prop: 'two',
                        minWidth: '120'
                    },
                    {
                        id: 3,
                        label: '2020-03',
                        align: 'left',
                        prop: 'three',
                        minWidth: '120'
                    },
                    {
                        id: 4,
                        label: '2020-04',
                        align: 'left',
                        prop: 'four',
                        minWidth: '120'
                    },
                    {
                        id: 5,
                        label: '2020-05',
                        align: 'left',
                        prop: 'five',
                        minWidth: '120'
                    },
                    // {
                    //     id: 8,
                    //     label: '当月完成案件数(件)',
                    //     align: 'left',
                    //     prop: 'six',
                    //     minWidth: '150'
                    // },
                    {
                        id: 6,
                        label: '累计完成订单数(件)',
                        align: 'left',
                        prop: 'finishFinals',
                        minWidth: '160'
                    },
                    {
                        id: 7,
                        label: '发明专利占比(%)',
                        align: 'left',
                        prop: 'inventRatio',
                        minWidth: '150'
                    }
                ]
        }
    },

    watch: {
        activeTabs: {
            handler: function(val) {
                if (val == 'case_statistics') {
                    this.tableHeader = [
                        {
                            id: 1,
                            label: '2020-01',
                            align: 'left',
                            prop: 'one',
                            minWidth: '130'
                        },
                        {
                            id: 2,
                            label: '2020-02',
                            align: 'left',
                            prop: 'two',
                            minWidth: '130'
                        },
                        {
                            id: 3,
                            label: '2020-03',
                            align: 'left',
                            prop: 'three',
                            minWidth: '130'
                        },
                        {
                            id: 4,
                            label: '2020-04',
                            align: 'left',
                            prop: 'four',
                            minWidth: '130'
                        },
                        {
                            id: 5,
                            label: '2020-05',
                            align: 'left',
                            prop: 'five',
                            minWidth: '130'
                        },
                        // {
                        //     id: 8,
                        //     label: '当月完成案件数(件)',
                        //     align: 'left',
                        //     prop: 'six',
                        //     minWidth: '150'
                        // },
                        {
                            id: 6,
                            label: '累计完成订单数(件)',
                            align: 'left',
                            prop: 'finishFinals',
                            minWidth: '175'
                        },
                        {
                            id: 7,
                            label: '发明专利占比(%)',
                            align: 'left',
                            prop: 'inventRatio',
                            minWidth: '160'
                        }
                    ]
                } else if (val == 'case_analysis') {
                    this.tableHeader = [
                        {
                            id: 1,
                            label: '撰写中(件)',
                            align: 'left',
                            prop: 'noFinish',
                            minWidth: '120'
                        },
                        {
                            id: 2,
                            label: '返修案件数(件)',
                            align: 'left',
                            prop: 'reworkCount',
                            minWidth: '150'
                        },
                        {
                            id: 3,
                            label: '返修案件占比(%)',
                            align: 'left',
                            prop: 'repairRate',
                            minWidth: '160'
                        },
                        {
                            id: 4,
                            label: '返修次数(次)',
                            align: 'left',
                            prop: 'repairCount',
                            minWidth: '130'
                        },
                        {
                            id: 5,
                            label: '平均返修次数(次)',
                            align: 'left',
                            prop: 'reworkAverageCount',
                            minWidth: '170'
                        },
                        {
                            id: 6,
                            label: '撤案率(%)',
                            align: 'left',
                            prop: 'withdrawalRate',
                            minWidth: '120'
                        },
                    ]
                } else if (val == 'case_time_consuming') {
                    this.tableHeader = [
                        {
                            id: 1,
                            label: '平均接单时间(天)',
                            align: 'left',
                            prop: 'splicingTime',
                            minWidth: '160'
                        },
                        {
                            id: 2,
                            label: '平均撰写时间(天)',
                            align: 'left',
                            prop: 'splicingWriteTime',
                            minWidth: '160'
                        },
                        {
                            id: 3,
                            label: '平均质控时间(天)',
                            align: 'left',
                            prop: 'splicingQualityTime',
                            minWidth: '160'
                        },
                        {
                            id: 4,
                            label: '平均发送定稿时间(天)',
                            align: 'left',
                            prop: 'splicingSendFinalTime',
                            minWidth: '200'
                        },
                        {
                            id: 5,
                            label: '完成案件平均耗时(天)',
                            align: 'left',
                            prop: 'splicingCaseTime',
                            minWidth: '180'
                        },
                    ]
                } else if (val == 'gzj_after') {
                    this.tableHeader = [
                        {
                            id: 1,
                            label: '授权数(件)',
                            align: 'left',
                            prop: 'empowerCount',
                            minWidth: '120'
                        },
                        {
                            id: 2,
                            label: '授权率(%)',
                            align: 'left',
                            prop: 'empowerRate',
                            minWidth: '120'
                        },
                        {
                            id: 3,
                            label: '答复/补正率(%)',
                            align: 'left',
                            prop: 'replyCorrectionRate',
                            minWidth: '140'
                        },
                        {
                            id: 4,
                            label: '驳回数(件)',
                            align: 'left',
                            prop: 'rejectCount',
                            minWidth: '120'
                        },
                        {
                            id: 5,
                            label: '驳回率(%)',
                            align: 'left',
                            prop: 'rejectRate',
                            minWidth: '120'
                        },
                    ]
                } else if (val == 'agent-rate') {
                    this.tableHeader = [
                        {
                            id: 1,
                            label: '平均态度分',
                            align: 'left',
                            prop: 'attitude'
                        },
                        {
                            id: 2,
                            label: '平均质量分',
                            align: 'left',
                            prop: 'quelity'
                        },
                        {
                            id: 3,
                            label: '平均耗时分',
                            align: 'left',
                            prop: 'take_time'
                        },
                        {
                            id: 4,
                            label: '平均总分',
                            align: 'left',
                            prop: 'total_score'
                        }
                    ]
                }
            },
            immediate: true,
            deep: true
        }
    },

    created() {
        this.getTableData()
    },

    methods: {
        paginateChange(params) {
            this.per_page = params.perPage
            this.current_page = params.page
            this.getTableData()
        },
        searchMethods(params, no_search) {
            this.resetCondition()
            this.search_params = params
            if (!no_search) {
                this.getTableData()
            }
        },
        getTableData() {
            let params = {
                page: this.current_page,
                perPage: this.per_page
            }
            params = {...params, ...this.sort_params, ...this.search_params}
            this.loading = true
            let url = `/api/user/${this.activeTabs}`
            if (this.activeTabs == 'agent-rate') {
                // this.loading = false
                // return
                url = '/api/grades/agent_count'
            }
            this.$axios.get(url, {
                params: params
            }).then(res => {
                if (res.data.code == 200) {
                    
                    this.tableData = res.data.data
                    if (this.tableData.length) {
                        if (this.activeTabs == 'case_statistics') {
                            let month = this.tableData[0].months
                            this.tableHeader[1].label = month[1] + '(件)'
                            this.tableHeader[2].label = month[2] + '(件)'
                            this.tableHeader[3].label = month[3] + '(件)'
                            this.tableHeader[4].label = month[4] + '(件)'
                            this.tableHeader[5].label = month[5] + '(件)'

                        }
                    } else {

                    }
                    
                    this.total = res.data.page.total
                    this.loading = false
                } else {
                    this.loading = false
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        },
        async tabChange() {
            this.search_show = false
            this.$nextTick(() => {
                this.search_show = true
            })
            await this.resetCondition()
            this.getTableData()
        },
        resetCondition() {
            this.per_page = 25
            this.current_page = 1
            this.search_params = {}
            this.sort_params = {}
            this.$refs['order-sum'].table_show = false
            this.is_show = false
            this.$nextTick(() => {
                this.is_show = true
                this.$refs['order-sum'].table_show = true
            })
        },
        sortMethods(params) {
            this.sort_params = params
            this.getTableData()
        }
    }
}
</script>

<style lang="less" scoped>
.agent-sum-wrap {
    margin-top: -10px;
    .tabs-wrap {
        .tabs {
            width: 100%;
        }
        .search-wrap {
            margin-top: -50px;
        }
    }
}
</style>
